<template>
	<view class="homeContainer">
		<!-- 弹窗 -->
		<noticeVue v-if="conf.notice" :isShow="conf.notice.is_show == 1 && isNeedShow == 1" @closePop="closePop"
			:content="conf.notice.notice"></noticeVue>
		<view class="header">
			<view class="search-box">
				<uni-icons type="search" class="search-icon" color="#c2c6ce"></uni-icons>
				<input type="text" placeholder="搜索文章、标签" />
			</view>
		</view>
		<view class="type-list">
			<scroll-view scroll-x="true">
				<view :class="{'type-item' : true,'act': actType == 'latest'}" @click="switchArtList('latest')">最新
				</view>
				<view :class="{'type-item' : true,'act': actType == 'hot'}" @click="switchArtList('hot')">最热</view>
				<view v-if="isLogin" :class="{'type-item' : true,'act': actType == 'force'}"
					@click="switchArtList('force')">关注</view>
			</scroll-view>
		</view>
		<view class="carousels">
			<swiper indicator-dots indicator-color="rgba(0,0,0,0.3)" indicator-active-color="#fff" autoplay
				interval="2000">
				<swiper-item v-for="item in carousel" @click="goCarouselDetail(item)">
					<image :src="item.path" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="runLamp">
			<uni-icons class="run-icon" type="notification" size="24" color="$theme-color"></uni-icons>
			<scroll-view scroll-x>
				<view class="ctn" v-if="conf.main">{{conf.main.app_tip}}</view>
			</scroll-view>
		</view>
		<view class="art-list">
			<artItemVue :item="item" v-for="item in list" :key="item.id"></artItemVue>
			<uni-load-more :status="hasMore && isLoading ? 'loading' : 'noMore'"></uni-load-more>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import artItemVue from '@/components/art-item/art-item.vue';
	import noticeVue from '@/components/pop/notice/notice.vue';
	import {
		onReachBottom
	} from "@dcloudio/uni-app"
	import {
		apiGetCarousel,
		apiGetCategory,
		apiGetConfig,
		apiHomeArtList,
		apiStartUp
	} from '@/api/apis';
	import {
		validateURL
	} from "@/minix/minix.js"
	import {
		useUserStore
	} from '@/store/user';
	import {
		useAppStore
	} from '../../store/app';
	let isLogin = ref(false)
	// 文章类型 最新、热、关注
	let actType = ref('latest')
	// 文章列表
	let list = ref([])
	let carousel = ref([])
	let conf = ref({
		runText: ''
	})
	let page = ref(1)
	let hasMore = ref(true)
	let isLoading = ref(false)
	// 文章列表
	const bg = ref('')
	let isNeedShow = ref(0)
	onLoad(async () => {
		uni.showLoading({
			title: '加载中',
			mask: true
		})
	})
	// 检查弹窗是否显示
	const checkShouldShow = () => {
		try {
			const lastClickTime = uni.getStorageSync('lastClickTime');
			if (!lastClickTime) {
				isNeedShow.value = 1;
				return;
			}
			const currentDate = new Date().toLocaleDateString();
			const lastClickDate = new Date(lastClickTime).toLocaleDateString();
			isNeedShow.value = currentDate !== lastClickDate;
		} catch (error) {
			console.error('检查显示状态时出错:', error);
			isNeedShow.value = true;
		}
	};
	// 关闭首页弹窗
	const closePop = (e) => {
		conf.value.notice.is_show = e
	}
	const artList = async () => {
		await apiHomeArtList({
			sort: actType.value,
			page: 1
		}).then(res => {
			list.value = res.data.data
			uni.hideLoading()
		})
	}
	// 获取配置
	const getConfig = async () => {
		await apiGetConfig().then(res => {
			conf.value = res.data
		})
		checkShouldShow()
		useAppStore().setAppData(conf.value)
	}
	//切换文章类型
	const switchArtList = (type) => {
		actType.value = type
		page.value = 1
		hasMore.value = true
		isLoading.value = false
		uni.showLoading({
			title: '加载中',
			mask: true
		})
		artList()
	}
	const softStartUp = async () => {
		await apiStartUp()
	}
	// 获取轮播图
	const getCarousel = async () => {
		await apiGetCarousel().then(res => {
			carousel.value = res.data
		})
	}
	const verifyLog = async () => {
		isLogin.value = await useUserStore().verifyLog()
	}
	const goCarouselDetail = (item) => {
		if (item.type == 1) {
			if (!validateURL(item.url)) {
				uni.showModal({
					title: "温馨提示",
					content: "该活动已结束",
					showCancel: false,
					success: res => {}
				})
				return false
			}
			uni.navigateTo({
				url: "/pages/common/iframe-show?url=" + item.url + "&desc=" + item.desc
			})
		} else if (item.type == 2) {
			uni.navigateTo({
				url: item.url
			})
		} else {
			// 浏览器
			plus.runtime.openURL(item.url);
		}

	}
	onReachBottom(async () => {
		if (isLoading.value || !hasMore.value) return
		isLoading.value = true
		page.value = page.value + 1
		await apiHomeArtList({
			page: page.value,
			sort: actType.value
		}).then(res => {
			if (res.data.data.length > 0) {
				isLoading.value = false
				list.value = [...list.value, ...res.data.data]
				if (!res.data.has_more) hasMore.value = false
			} else {
				hasMore.value = false
				isLoading.value = false
			}
		})

	})
	artList()
	getConfig()
	// 软件启动次数添加
	softStartUp()
	getCarousel()
	// 判断是否登录
	verifyLog()
</script>

<style scoped lang="scss">
	.homeContainer {
		padding: 25rpx;

		.header {
			height: 70rpx;
			width: 100%;

			.search-box {
				background-color: #f3f4f6;
				border-radius: 10rpx;
				display: flex;
				align-items: center;
				height: 100%;
				padding-left: 20rpx;

				.search-icon {
					font-size: 30rpx;
				}

				input {
					margin-left: 20rpx;
				}
			}
		}

		.type-list {
			height: 86rpx;
			overflow: hidden;
			display: flex;
			align-items: center;
			margin: 20rpx 0;

			.type-item {
				display: inline-block;
				font-size: 26rpx;
				margin-right: 30rpx;
				border-radius: 30rpx;
				background-color: #f3f4f6;
				padding: 10rpx 20rpx;
				color: #4b5563;
			}

			.act {
				background-color: $theme-color;
				color: #fff;
			}
		}

		.carousels {
			width: 100%;
			height: 300rpx;
			border-radius: 15rpx;
			overflow: hidden;

			swiper {
				width: 100%;
				height: 100%;

				swiper-item {
					width: 100%;
					height: 100%;

					image {
						width: 100%;
						height: 100%;
						z-index: 99;
					}
				}
			}
		}

		.runLamp {
			background-color: #eee;
			border-radius: 30rpx;
			margin: 10rpx 0;
			display: flex;
			align-items: center;
			padding: 10rpx;
			font-size: 28rpx;
			color: $theme-color;
			white-space: nowrap;
			overflow: hidden;

			.run-icon {
				margin-right: 10rpx;
			}
			.ctn {
				display: inline-block;
				padding-left: 100%;
				animation: marquee 20s linear infinite;
			}

			@keyframes marquee {
				0% {
					transform: translateX(0);
				}

				100% {
					transform: translateX(-100%);
				}
			}
		}
	}
</style>